<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        header{
            height: 30px;
            width: 600px;
            background-image: url(img/btn_cartoon.gif);
            margin:  0 auto;
            display: block;
            background-position: 606px 0px;
        }
        header div.h1{
            display: inline-block;
            height: 30px;
            width: 100px;
            background-image: url(img/btn_cartoon.gif);
            background-repeat: no-repeat;
            background-position:0px -102px; 
        }
        header li{
            display: inline-block;
            list-style: none;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            margin-bottom: 10px;
            /*background-image: url(img/btn_cartoon.gif);*/
            background-repeat: no-repeat;
            /*background-position: 0px -220px;*/
        } 
        header span{
            display: inline-block;
            width: 30px;
            height: 20px;
            margin-bottom: 5px;
            background-image: url(img/btn_cartoon.gif);
            background-repeat: no-repeat;
            background-position: 0px -402px;
        }
        header .right{
            background-position: -30px -402px;
            margin-left: -5px;
        }
        header a{
            text-decoration: none;
            float: right;
            margin-right: 10px;
            font-size: 14px;
            line-height: 14px;
            margin-top: 8px;
            font-style: italic;
            padding: 0;
        }
        #content{
            width: 600px;
            height: 160px;
            margin: 0 auto;
            border: 1px solid #ccc;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }
        #content #show{
            width: 600px;
            height: 160px;
            margin: 0 auto;
            border: 1px solid #ccc;
            box-sizing: border-box;
            position: absolute;
        }
        #content ul{
            width: 100%;
            height: 160px;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            position: absolute;
        }
        #content ul li{
            width: 130px;
            height: 150px;
            padding: 0;
            margin: 10px 9px;
            list-style: none;
            float: left;
            text-align: center;
        }
        #content ul li img{
            width: 128px;
            height: 96px;
        }
        #content ul li p{
            margin: 0;
            padding: 0;
            text-align: left;
            font-size: 14px;
        }
        #content ul li p.p1{
            color: blue;
        }
        #content ul li p.p2{
            color: #ccc;
        }
        #content .active {
            display: block;
        }
        #content .u2{
            left: 600px;
        }
        #content .u3{
            left: 1200px;
        }
        #content .u4{
            left: 1800px;
        }
        #header li.active{
            background-image: url(img/btn_cartoon.gif);
            background-repeat: no-repeat;
            background-position: 1px -220px;
        }
    </style>
</head>
<body>
    <header id="header">
        <div class="h1"></div>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <span class="left"></span>
        <span class="right"></span>
        <a href="#">更多>></a>
    </header>
    <div id="content">
        <div id="show">
        <ul class="active">
            <li>
                <img src="img/01.jpg" alt="">
                <p class="p1">海贼王</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/01.jpg" alt="">
                <p class="p1">海贼王</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/01.jpg" alt="">
                <p class="p1">海贼王</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/01.jpg" alt="">
                <p class="p1">海贼王</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
        </ul>


        <ul class="u2">
            <li>
                <img src="img/02.jpg" alt="">
                <p class="p1">哆啦A梦</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/02.jpg" alt="">
                <p class="p1">哆啦A梦</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/02.jpg" alt="">
                <p class="p1">哆啦A梦</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/02.jpg" alt="">
                <p class="p1">哆啦A梦</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
        </ul>


        <ul class="u3">
            <li>
                <img src="img/03.jpg" alt="">
                <p class="p1">火影忍者</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/03.jpg" alt="">
                <p class="p1">火影忍者</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/03.jpg" alt="">
                <p class="p1">火影忍者</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/03.jpg" alt="">
                <p class="p1">火影忍者</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
        </ul>


        <ul class="u4">
            <li>
                <img src="img/04.jpg" alt="">
                <p class="p1">龙珠</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/04.jpg" alt="">
                <p class="p1">龙珠</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/04.jpg" alt="">
                <p class="p1">龙珠</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
            <li>
                <img src="img/04.jpg" alt="">
                <p class="p1">龙珠</p>
                <p class="p2">播放：<em>28276</em></p>
            </li>
        </ul>
       </div>         
    </div>
</body>
</html>
<script>
    var current=0;
    var left=0;
    $('#header .right').click(function(index){
        console.log(current);
        if(current==3){
            current=-1;
            left=600;
        }
        current++;
        left-=600;
        $('#header li').eq(current).addClass('active').siblings().removeClass('active');
        $('#content #show').stop().animate({left:left})    
        if(current>=3){
            current=-1;
            left=600;
        }
    })

    $('#header .left').click(function(index){
        if(current<=0){
            current =4;
            left=-2400;
        }
        current--;
        left+=600
        $('#header li').eq(current).addClass('active').siblings().removeClass('active');      
        $('#content #show').stop().animate({left:left});
        console.log(current);
    })    
</script>